<script setup>
import { ref, reactive } from 'vue'
let schedules = reactive([
  {
    id: 1,
    content: '学习Vue2小时',
    progress: 50
  }
  
])
</script>

<template>
  <div class="schedule-container">
    <h3 class="schedule-title">Show Schedule</h3>
    
    <div class="schedule-table-wrapper">
      <table class="schedule-table">
        <thead>
          <tr class="table-header">
            <th>ID</th>
            <th>内容</th>
            <th>进度</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr class="table-row" v-for="schedule in schedules" :key="schedule.id">
            <td class="table-cell">{{ schedule.id }}</td>
            <td class="table-cell">
              <input 
                type="text" 
                v-model="schedule.content" 
                class="content-input"
                placeholder="输入日程内容"
              >
            </td>
            <td class="table-cell">
              <div class="progress-container">
                <input 
                  type="number" 
                  v-model="schedule.progress" 
                  class="progress-input"
                  min="0" 
                  max="100"
                >
                <span class="progress-percent">{{ schedule.progress }}%</span>
                <div class="progress-bar">
                  <div 
                    class="progress-fill" 
                    :style="{ width: `${schedule.progress}%` }"
                  ></div>
                </div>
              </div>
            </td>
            <td class="table-cell action-cell">
              <button class="btn save-btn" @click="saveSchedule(schedule.id)">保存修改</button>
              <button class="btn delete-btn" @click="deleteSchedule(schedule.id)">删除</button>
            </td>
          </tr>
          <tr>
            <td colspan="4" class="add-row">
              <button class="btn add-btn" @click="addSchedule()">新增日程</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.schedule-container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.schedule-title {
  font-size: 24px;
  color: #1d2129;
  margin-bottom: 24px;
  text-align: center;
  font-weight: 600;
}

.schedule-table-wrapper {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header {
  background-color: #f5f7fa;
}

th, td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #f0f2f5;
}

th {
  font-weight: 600;
  color: #4e5969;
  font-size: 14px;
}

.table-row:hover {
  background-color: #fafafa;
  transition: background-color 0.2s ease;
}

.content-input, .progress-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.content-input:focus, .progress-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.progress-input {
  width: 60px;
  margin-right: 10px;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-percent {
  min-width: 40px;
  text-align: center;
  color: #4e5969;
  font-size: 14px;
}

.progress-bar {
  flex-grow: 1;
  height: 8px;
  background-color: #e5e6eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #409eff;
  transition: width 0.3s ease;
}

.btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.save-btn {
  background-color: #409eff;
  color: #ffffff;
  margin-right: 8px;
}

.save-btn:hover {
  background-color: #3391e8;
}

.delete-btn {
  background-color: #ffffff;
  color: #f56c6c;
  border: 1px solid #f56c6c;
}

.delete-btn:hover {
  background-color: #fff5f5;
}

.add-btn {
  background-color: #67c23a;
  color: #ffffff;
  padding: 8px 20px;
}

.add-btn:hover {
  background-color: #52b12c;
}

.add-row {
  text-align: center;
  padding: 16px;
  background-color: #fafafa;
}

.action-cell {
  display: flex;
  gap: 8px;
}

@media (max-width: 768px) {
  th, td {
    padding: 12px 8px;
  }
  
  .btn {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .progress-container {
    flex-wrap: wrap;
  }
  
  .progress-bar {
    width: 100%;
    margin-top: 8px;
  }
}
</style>
